<template>
  <view class="container">
    <!-- 两个按钮横向排列 -->
    <view class="buttons">
      <button @click="generateQRCode('美团')">美团</button>
      <button @click="generateQRCode('饿了么')">饿了么</button>
    </view>

    <!-- 显示二维码 -->
    <view class="qrcode-container" v-if="qrCodeData">
      <canvas canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
      <button class="save-btn" @click="saveQRCode">保存二维码</button>
    </view>
  </view>
</template>

<script>
// 引入 weapp-qrcode
import drawQrcode from 'weapp-qrcode';

export default {
  data() {
    return {
      merchantId: '',      // 商户 ID
      platform: '',        // 平台名字（美团或饿了么）
      qrCodeData: null, 
	  storeId:1,// 二维码对象数据
    };
  },
  onLoad(options) {
    // 获取上个页面传递的商户 ID
    this.merchantId = options.merchantId || '默认ID';
	this.code();
  },
  methods: {
	  code(){
		  uni.request({
		  	url:'http://zhaoyang.nat300.top/store/find',
			method: 'POST',
			data: {
			  id: this.merchantId
			},
			header: {
			  'content-type': 'application/json' // 默认值
			},
			success:(res)=>{
			console.log("codestoreId:"+res.data.id)
			this.storeId=res.data.id
			}
		  })
	  },
    // 生成二维码
    generateQRCode(platform) {
      this.platform = platform; // 设置平台名字

      // 生成二维码数据
      this.qrCodeData = {
        platform: this.platform,
        storeId: this.storeId,
      };

      // 将对象转为字符串
      const qrCodeString = JSON.stringify(this.qrCodeData);

      // 绘制二维码到 canvas
      drawQrcode({
        width: 200,
        height: 200,
        canvasId: 'qrcode',
        text: qrCodeString,
      });
    },
    // 保存二维码到相册
    saveQRCode() {
      // 获取 canvas 转换为临时路径
      uni.canvasToTempFilePath({
        canvasId: 'qrcode',
        success: (res) => {
          const tempFilePath = res.tempFilePath;

          // 获取相册权限
          uni.authorize({
            scope: 'scope.writePhotosAlbum', // 相册权限
            success: () => {
              // 保存到相册
              uni.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success: () => {
                  uni.showToast({
                    title: '保存成功',
                    icon: 'success',
                  });
                },
                fail: () => {
                  uni.showToast({
                    title: '保存失败',
                    icon: 'none',
                  });
                },
              });
            },
            fail: () => {
              // 如果未授权，提示用户打开设置页面
              uni.showModal({
                title: '提示',
                content: '需要授权才能保存二维码到相册，请前往设置页面开启权限',
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting(); // 打开设置页面
                  }
                },
              });
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: '二维码生成失败',
            icon: 'none',
          });
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.buttons {
  display: flex; /* 横向排列 */
  justify-content: center; /* 居中对齐 */
  gap: 20px; /* 按钮间距 */
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007aff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

button.save-btn {
  margin-top: 20px;
  background-color: #28a745; /* 绿色按钮 */
}

.qrcode-container {
  margin-top: 20px;
}
</style>

